<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css"
	href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<style>
.info-box {
	height: 85px;
	background-color: white;
	background-color: #ecf0f5;
}

.info-box .info-box-icon {
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	float: left;
	height: 85px;
	width: 85px;
	text-align: center;
	font-size: 45px;
	line-height: 85px;
	background: rgba(0, 0, 0, 0.2);
}

.info-box .info-box-content {
	padding: 5px 10px;
	margin-left: 85px;
}

.info-box .info-box-content .info-box-text {
	display: block;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.info-box .info-box-content .info-box-number {
	display: block;
	font-weight: bold;
	font-size: 18px;
}

.major {
	font-weight: 10px;
	color: #01AAED;
}

.main {
	margin-top: 25px;
}

.main .layui-row {
	margin: 10px 0;
}
</style>
</head>

<body>
	<div class="layui-fluid main">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #00c0ef !important; color: white;"><i
						class="fa fa-ambulance" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">CPU Traffic</span> <span
							class="info-box-number">90%</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #dd4b39 !important; color: white;"><i
						class="fa fa-google-plus" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">Likes</span> <span
							class="info-box-number">25,412</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #00a65a !important; color: white;"><i
						class="fa fa-shopping-bag" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">Sales</span> <span
							class="info-box-number">654</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #f39c12 !important; color: white;"><i
						class="fa fa-users" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">New Members</span> <span
							class="info-box-number">85</span>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-col-md12">
				<ul class="layui-timeline">
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">置顶的说明文档</h3>
							<ul>
								<li>交流群: <a target="_blank"
									href="//shang.qq.com/wpa/qunwpa?idkey=7d46b4a74805131378febabe99963fdd3e767544a34f9b92a9db0737ebf130a1"><img
										border="0" src="//pub.idqqimg.com/wpa/images/group.png"
										alt="BeginnerAdmin" title="BeginnerAdmin"></a>
								</li>
								<li>点击进入群哦，如果实在加不了还有群号啊[248049395]</li>
								<li>大家在用的过程中有什么问题的话可以在群里问啊，别的先不写了...</li>
								<li><a href="index.1.html" target="_blank">点击查看一级菜单的加载</a></li>
							</ul>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">9月1日(v1.0.3)</h3>
							<p>
							<h3>#添加两个主题(欢迎你们去配很好看的色彩，反馈给我，然后我分享给大家/xyx)</h3>
							<ul>
								<li><a href="index.2.html" target="_blank">点击我(灰色)</a></li>
								<li><a href="index.3.html" target="_blank">点击我(蓝色)</a></li>
								<li><a href="page.html" target="_blank">模板的另一种加载方式(page)</a></li>
								<li>更新到 layui 2.1.1 <a
									href="http://www.layui.com/doc/base/changelog.html"
									target="_blank">#更新文档</a></li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月31日(v1.0.2)</h3>
							<p>
							<h3>#添加onelevel组件（加载头部菜单）</h3>
							<ul>
								<li>详见<a href="onelevel.html">说明文档</a></li>
							</ul>
							<h3>#Tab组件</h3>
							<ul>
								<li>添加选项卡加载进度条</li>
							</ul>
							<h3>#其他更新</h3>
							<ul>
								<li>优化顶部菜单的样式</li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月30日(v1.0.1)</h3>
							<p>
							<h3>#Navbar组件</h3>
							<ul>
								<li>添加远程加载和本地加载的方式（设置方式详见<a href="navbar.html">说明文档</a>）
								</li>
							</ul>
							<h3>#Tab组件</h3>
							<ul>
								<li>添加 mainUrl 属性 默认：main.html</li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月29日</h3>
							<p>
							<ul>
								<li>更新<a href="navbar.html">navbar组件</a>和<a href="tab.html">tab组件</a>的说明文档
								</li>
								<li>新增左侧菜单可缩进.</li>
								<li>调整头部导航栏的高度，让她看起来更协调.</li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月25日</h3>
							<p>
							<ul>
								<li>
									<p>添加message组件</p>
									<p>Example:</p> <pre class="layui-code">
var message = layui.message;
//示例，监听某点击事件后触发
$(selector).on('click',function(){
    message.show({
        skin:'cyan',//皮肤  支持:red,orange,cyan,blue,black,default
        msg:'提示信息'//提示信息
    });
});</pre><input type="button" class="layui-btn" value="点击我测试message组件"
									id="test" />
								</li>
								<li>tab组件添加两个属性：<span class="major">closeBefore</span>[关闭选项卡之前发生]、<span
									class="major">onSwitch</span>[选项卡切换时发生](具体请查看文档[好像文档还没加进去~~~])
								</li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月24日</h3>
							<p>
							<h3>BeginnerAdmin 改名为kit_admin</h3>
							<ul>
								<li>项目重构，基于layui2.0</li>
								<li>添加navbar模块 <a href="navbar.html">navbar文档</a>
								</li>
								<li>添加tab模块 <a href="tab.html">tab文档</a>
								</li>
								<li>还有不想写了....</li>
							</ul>
							</p>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">2017年</div>
						</div></li>
					<li class="layui-timeline-item"><i
						class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">更新日志</div>
						</div></li>
				</ul>
			</div>
		</div>
	</div>
	<script src="media/layui/layui.js"></script>
	<script>
        layui.use('jquery', function() {
            var $ = layui.jquery;
            $('#test').on('click', function() {
                parent.message.show({
                    skin: 'cyan'
                });
            });
        });
    </script>
</body>

</html>